<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../jquery.js"></script>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    table {
        border-collapse: collapse;
        width: 800px;
    }

    tr,
    th,
    td {
        border: 1px solid black;
        text-align: center;
    }

    .box {
        width: 300px;
        height: 300px;
        border: 1px solid black;
        padding-top: 50px;
        text-align: center;
        position: fixed;
        top: 20%;
        left: 40%;
        display: none;
        z-index: 99;
    }

    .nav {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        display: none;
        z-index: 9;
    }
    tbody tr:nth-child(odd){
        background: rgb(211, 218, 171);
    }
    tbody tr:nth-child(even){
        background: rgb(149, 201, 177);
    }
</style>

<body>
    <button id="message">我要留言</button>
    <button id="delObj">删除选中</button>
    <div class="box">
        留言标题:<input type="text"><br><br><br>
        留言人:<input type="text"><br><br><br>
        留言内容:<textarea></textarea><br><br><br>
        <button id="fabu">发布</button>
        <button id="guanbi">关闭</button>
    </div>
    <div class="nav"></div>
    <table>
        <thead>
            <tr>
                <th><input type="checkbox" id="selectAll"></th>
                <th>ID</th>
                <th>标题</th>
                <th>留言人</th>
                <th>内容</th>
                <th>时间</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</body>
<script>
    // 打开页面 可以看到留言列表
    // 点击留言按钮 弹出添加留言表单
    // 点击发布 ，显示发布成功， 1秒后关闭弹出， 显示最新留言列表
    // 点击删除 弹出二次确认弹框 确定即删除，取消则不删，删除成功提示然后显示最新的列表
    // 接口地址如下：
    // ​ 获取留言列表：GET https://liu.zzgoodqc.cn/lyb
    // ​ 发布留言接口：POST https://liu.zzgoodqc.cn/lyb/add
    // ​ 发布留言需要的字段：
    // ​ title、content、name
    // ​ 删除接口地址：GET https://liu.zzgoodqc.cn/del/2
    // ​ 2是该留言的id 获取列表时会返回id
    // 注意留言列表所有人都可以看到 ，不要操作别人的留言

    $(function () {
        messageHtml()
        yemianxuanran()
        $('tbody').bind('click','button',delFn)
        // 我要留言
        $('#message').click(function () {
            $('.nav').css({ background: 'black', opacity: '0.2' }).show(500)
            $('.box').show(500)
        })
        // 关闭
        $('#guanbi').click(function () {
            $('.nav').hide(500)
            $('.box').hide(500)
        })
    })
    function messageHtml() {
        $.get('https://liu.zzgoodqc.cn/lyb', function (res) {
            var str = ''
            for (let i in res.data) {
                str += `<tr>
                            <td><input type='checkbox'></td>
                            <td class='ids'>${res.data[i].id}</td>
                            <td>${res.data[i].name}</td>
                            <td>${res.data[i].title}</td>
                            <td>${res.data[i].content}</td>
                            <td>${res.data[i].updated_at}</td>
                            <td><button name='del'>删除</button></td>
                        </tr>`
            }
            $('tbody').html(str)
        }, 'Json')
       
    }
    
    function yemianxuanran() {
        
        $('#fabu').click(function () {
            var title = $('input:first').val()
            var content = $('input:last').val()
            var name = $('textarea').val()

            $.ajax({
                url: 'https://liu.zzgoodqc.cn/lyb/add',
                method: 'POST',
                dataType: 'Json',
                data: {
                    title: title,
                    content: content,
                    name: name
                },
                success: function () {
                    if (title || content || name) {
                        alert('发布成功')
                        $('.box,.nav').hide()
                        messageHtml()
                    } else {
                        alert('发布失败')
                    }
                }
            })
        })
    }

    function delFn (even) {
        var target = $(even.target)
        if (target.prop('name') == 'del') {
            var margin = target.parent().siblings('.ids').html()
            $.get(`https://liu.zzgoodqc.cn/del/${margin}`,function(){
                messageHtml()
            },'Json')
        }
    }
    // 全选
    $('input').click(function(){
        $('tr :input').prop('checked',$(this).prop('checked'))
    })
    $('#delObj').click(function(){
        // console.log(666);
        var dels = $(this).prop('checked')
        $.get(`https://liu.zzgoodqc.cn/del/${dels}`,function(){
            messageHtml()
        },'Json')
        
    })
</script>

</html>